<!DOCTYPE html>

<html lang="en">
    <head>

        <!-- Metadata -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <meta name="description" content="website"/>
        <meta name="author" content="khang nguyen"/>
        <title>{{ site.title }} | {{ site.info }}</title>
        <link rel="icon" type="image/x-icon" href="{{ site.icon-pic }}"/>
        
        <!-- Font Awesome icons -->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js"></script>
		
        <!-- Google fonts-->
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> -->
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.loli.net/css?family=Saira+Extra+Condensed:500,700&display=swap" rel="stylesheet" type="text/css"/>
        <link href="https://fonts.loli.net/css?family=Muli:400,400i,800,800i&display=swap" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.4.0/css/font-awesome.min.css">        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

        <!-- Core theme CSS -->
        <link href="styles/styles.css" rel="stylesheet"/>        

    </head>

    <body class="light-theme">
        <nav class="topnav navbar navbar-expand-lg navbar-light bg-white fixed-top">
            <div class="container">
                <a class="navbar-brand" href="./index.html"><strong>Zhang Jia-Qi @ BUAA</strong></a>
                <button  
                    id="top-navbar-button"
                    class="navbar-toggler"  
                    type="button"  
                    data-toggle="collapse"  
                    data-target="#navbarLinks"  
                    aria-controls="navbarLinks"  
                    aria-expanded="false"  
                    aria-label="Toggle navigation">  
                    <span class="navbar-toggler-icon"></span>  
                </button>  
                <div class="collapse navbar-collapse justify-content-end" id="navbarLinks">
                    <ul class="navbar-nav ml-auto d-flex align-items-center">
                        <li class="nav-item">
                            <a class="nav-link" href="#updates">News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#research">Publications</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#outreach">Projects</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#gallery">Gallery</a>
                        </li>
                    </ul>
                </div>                
            </div>
        </nav>

        <!-- Moving particles -->
        <canvas id="canvas"></canvas>

        <!-- Progress bar on top -->
        <div class="progress-bar-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>

        <!-- Back to top button -->
        <a id="back-to-top-button"></a>

        <!-- Toggle dark/light theme button -->
        <!-- <button class="toggle-theme-button" onclick="toggleTheme()">☀️</button> -->
        
        <!-- Assitant icon saying about theme changes -->
        <!-- <div class="popup-icon-container" id="popupIconContainer" draggable="true">
            <div class="icon"><img src="{{ site.icon-pic }}" width="65" height="65"></div>
            <div class="speech-balloon"></div>
        </div> -->
        
        <!-- Dismissal area for assistant icon -->
        <!-- <div class="dismissal-area" id="dismissalArea">&#10006;</div> -->

        <!-- Content -->
        <div class="container custom-margin">            
            {{ content }}
        </div>

        <!-- Bootstrap core JS-->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>  
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Isotope JS -->
        <script src="https://cdn.jsdelivr.net/npm/isotope-layout@3.0.2/dist/isotope.pkgd.min.js"></script>

        <!-- OwlCarousel2 JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
        
		<!-- Third party plugin JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

		<!-- Core theme JS-->
        <script src="js/scripts.js"></script>

    </body>
</html>
